/*
* @Author: Marte
* @Date:   2018-10-31 20:48:21
* @Last Modified by:   Marte
* @Last Modified time: 2018-11-02 16:44:21
*/
function Header(){
    this.init();
    this.addListener();

}
Header.template =`<nav class="navbar navbar-inverse navbar-default" >
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/">员工管理</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">

          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>

      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle user " data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">用户名 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#" class="addUser">添加用户</a></li>
            <li><a href="#" class="change">修改密码</a></li>
            <li><a href="#" class ="logout">退出登录</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

<div class="btn-group-vertical" role="group" aria-label="..." style="position:fixed; left:0px; ">
  <button type="button" class="btn btn-default type btn-type" style="border:none; height:80px; width:180px;">工种种类设置</button>
  <button type="button" class="btn btn-default staff" style="border:none; height:80px; width:180px;">员工信息管理</button>
<button type="button" class="btn btn-default section" style="border:none; height:80px; width:180px;">部门信息管理</button>
<button type="button" class="btn btn-default self " style="border:none; height:80px; width:180px;">管理员信息</button>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default btn-danger"   aria-expanded="false">退出登录 </button>

  </div>
</div>`;

$.extend(Header.prototype,{
    init(){
        this.createDom();
        this.loadUser();
    },
    createDom(){
        $("header").html(Header.template);
    },
    addListener(){
      $(".type").on("click",function(){
        window.location.href = "/html/type.html";
      });
      $(".staff").on("click",function(){
        window.location.href = "/html/staff.html";

      });
       $(".section").on("click",function(){
        window.location.href = "/html/section.html";

      });
       $(".self").on("click",function(){
        window.location.href = "/html/self.html";

      });
       $(".addUser").on("click",function(){
        window.location.href = "/html/addUser.html";
       });
       $(".change").on("click",function(){
        window.location.href = "/html/changePassword.html";
       });
       $(".btn-danger").on("click",this.logoutHandler);
       $(".logout").on("click",this.logoutHandler);


    },
      loadUser(){
      const user = sessionStorage.username;

      if(user){
        $(".user").text(user);
      }else{
        window.location.href="/html/login.html";
      }

    },
      logoutHandler() {
        sessionStorage.removeItem("username");
        $.getJSON("http://rap2api.taobao.org/app/mock/86513/api/users/logout", (data)=>{
            if(data.res_body.status === 1) {
                location.reload();
            }
        });
    },


});
new Header();